Уложитесь в мой дедлайн?
Oops! Something went wrong while submitting the form.
Компаниям не всегда нужен многостраничный сайт. Чтобы презентовать услуги, часто хватает и лендинга.В статье рассмотрим, что такое лендинг и как сделать дизайн собственного сайта. Теорию будем подкреплять примерами из недавнего проекта для дистрибьютора медицинского оборудования — для него мы сделали два сайта-визитки.
Лендинг (landing page или посадочная страница) — это одностраничный сайт с коммерческим предложением, который побуждает выполнить целевое действие — оставить контакты или купить товар. Цель лендинга — провести пользователя по воронке продаж и конвертировать в клиента.
У лендингов нет универсальной структуры, но есть четыре элемента, которые добавляют обязательно.
Это главная часть лендинга, которую пользователь видит при заходе на страницу. Здесь размещают оффер или изображение продукта.
После первого экрана располагают подробное описание товара или услуги.
Здесь рассказывают, как продукт решит потребности и закроет боли пользователя.
Кнопка с призывом к действию (call-to-action или CTA) ведет к форме сбора контактов, соцсетям компании, чат-боту или каталогу услуг. В длинных лендингах делают несколько CTА на протяжении страницы.
Остальные блоки лендинга опциональны. Компании часто добавляют на landing page:
MedEquip поставляет высокотехнологичное медоборудование и инструменты, а также производит кастомный инвентарь для врачей. Компания ориентирована на рынок ОАЭ и стран СНГ.
Заказчику был нужен стильный сайт-визитка. В этой нише многое завязано на личных встречах и нетворкинге. Одностраничник с контактами и описанием компании поможет наладить общение с будущими бизнес-партнерами.
Заказчик не планировал использовать лендинг для продаж: в первую очередь сайт был нужен для повышения доверия к бизнесу и удобства в коммуникации.
Главное пожелание: яркий дизайн лендинга и создание на конструкторе, без кастомной разработки. Такое решение позволяет оперативно вносить правки, если после передачи проекта клиент захочет что-то скорректировать, например, в контенте.
Посмотрите, каким получился готовый сайт для MedEquip:
На хиро пейдж ключевая информация о компании, кнопка с призывом к действию, и много свободного пространства. Добавили оптическую иллюзию: приглядитесь, эти линии как будто в движении 🌊
Следующий блок кратко рассказывает об услугах компании и продуктах. Если клиент хочет получить больше информации, предлагаем заполнить форму и отправить запрос.
Сам лендинг состоит из четырех блоков — этого хватит для сайта-визитки, чтобы дать ключевую информацию и подсветить преимущества сотрудничества с MedEquip.
Лендинг полностью:
Разберем 5 особенностей лендингов, чтобы лучше понять их отличия от многостраничников.
На лендинге нет вложенных страниц — навигация ограничивается одним экраном. Сайт же включает несколько разделов, которые доступны через меню в хедере.
Скорость разработки лендинга выше, чем у полноценного сайта — не придётся продумывать структуру меню и работать над дизайном и версткой подстраниц.
Еще лендинги часто создают в конструкторах — сервисах, где страницы собирают без написания кода, перетаскивая UI-элементы мышью. Это дополнительно ускоряет процесс разработки.
Если с развитием бизнеса посадочной страницы станет недостаточно, ее можно использовать как основу для полноценного сайта.
Из-за меньшего объема работ стоимость лендинга ниже, чем у многостраничника. Это важно для компаний, которые только вышли на рынок и хотят протестировать гипотезу с минимальными затратами.
Лендинг сосредоточен на одном предложении — продаже товара, сборе заявок на услугу или анонсировании события. На обычных сайтах много страниц, и каждая из них ориентируется на отдельные услуги и сегменты аудитории.
Заказчик лендинга для Medequip обратился к нам с еще одной задачей — сделать посадочную страницу для другого своего бизнеса — медтех-стартапа Артромед.
Компания Артромед работает на российском рынке, занимается дистрибуцией медоборудования и кастомной разработкой собственного оборудования. Врачи описывают свои идеи и задачи, а инженеры Артромед превращают их в прототипы.
Нам нужно было сделать классический продающий лендинг, который поможет в продвижении бизнеса. Многостраничник для этой цели не нужен. Главное — кратко донести суть услуги до потенциальных клиентов.
В структуре использовали такую последовательность блоков:
Так выглядит лендинг для Артромед:
Разработка лендинга состоит из 4 ключевых шагов.
Определяют цель страницы и блоки, которое проведут читателя по воронке продаж. На этом этапе также создают черно-белые вайрфреймы, которые показывают структуру страницы.
Выбирают цвета, шрифты и изображения. Если у компании уже есть фирменный стиль, лендинг делают на его основе.
После утверждения вайрфреймов и визуальной концепции переходят к разработке дизайна лендинга в цвете.
На финальном этапе лендинг становится кликабельным: его верстают с помощью кода или создают на конструкторе.
В проектах Medequip и Артромед мы взяли на себя весь цикл создания лендинга — от UI/UX дизайна до подготовки текстов и размещения готового лендинга на домене.Работа над MedEquip заняла 60 часов, а над Артромед — 64 часа. За это время мы:
Дизайн-команде важно как можно точнее понять, какого результата ожидает клиент. Это поможет избежать масштабных правок в будущем.
Вот что нужно сделать перед стартом проекта.
Бриф — это опросник, который клиент заполняет перед началом работы. В нем команда проекта задает вопросы о компании клиента, её позиционировании и цели лендинга. Чем подробнее бриф, тем лучше дизайнеры поймут видение заказчика.
Команда проекта анализирует лендинги конкурентов: какие блоки используют, что реализовано хорошо, а какие элементы стоит улучшить . Итоги исследования показывают клиенту, чтобы тот принял решение: либо отстроиться от похожих компаний, либо, наоборот, следовать трендам в нише.
Например, для Medequip клиент хотел цепляющий внимание дизайн с яркой цветовой палитрой — это решение позволило бы отстроиться от конкурентов.
Так выглядят лендинги других компаний-поставщиков медоборудования. Заказчик хотел что-то более свежее и актуальное 🙂
Референсами могут быть как лендинги других компаний, так и отдельные дизайнерские решения — стиль иконок, анимация переходов, цветовая гамма. Клиенты часто приносят свои примеры, а дизайн-команда подбирает дополнительные референсы, чтобы уточнить пожелания.
В проектах ориентируются не только на удачные примеры дизайна лендинга, но и на негативные референсы. Это помогает обозначить границы допустимого.
На основе запроса клиента и результатов исследования команда проекта создает мудборды — визуальные подборки, которые помогают определить палитру, стиль и ключевые элементы лендинга. Заказчик может выбрать один из мудбордов либо объединить два варианта.
Вот как выглядели мудборды для Medequip:
Клиенту понравились оба варианта, так что остановились на миксе: взяли светлую тему, но с яркими цветами из первого мудборда.
При создании дизайна лендинга для Артромед, определиться с концептом было сложнее. Мы предложили заказчику два цветовых варианта. Один — в палитре Medequip, чтобы подчеркнуть связь между компаниями. Другой — строгий черно-белый вариант.
И…заказчику зашли оба концепта! 🙂 Настолько, что он рассматривал опцию с переключением между двумя темами, только вместо светлой и темной — яркая и черно-белая.
Поначалу может показаться, что идея крутая. Однако этот вариант работает плохо — и вот почему:
Мы предложили остановиться на одном концепте. Или реализовать возможность переключения со светлой темы с яркими акцентами на темную с желтым. Но тогда потребуется 10 дополнительных часов на разработку дизайна лендинга и верстку.
Конечно, мы могли бы последовать принципу «любой каприз за ваши деньги» и сделать переключалку между сайтами в двух разных цветах. Но это противоречит нашему подходу 🙂 Мы на стороне клиента и предлагаем решения, которые экономят деньги заказчиков.
Так что после обсуждения с заказчиком, решили, что летим в дизайн с компромиссным вариантом — темно-фиолетовой палитрой.
Во время разработки лендинга у дизайн-команды и заказчика много вопросов для обсуждения. Клиенты не хотят тратить много времени и поэтому часто предлагают обсуждать проект письменно. Так было и с MedEquip — заказчик попросил нас присылать ссылки на результаты в чат.
В моменте кажется, что это здравое решение. На деле ничто не бережет время так, как обсуждение промежуточных результатов в Zoom. И вот почему:
На созвоне менеджер показывает результаты и объясняет, почему команда выбрала то или иное решение. Это экономит время на правках — заказчик сразу получает ответы на вопросы, а менеджер фиксирует, что нужно исправить.
Переписка может затянуться на несколько дней, особенно если заказчик и подрядчик находятся в разных часовых поясах. Живое обсуждение сокращает длительность диалога.
После созвона можно продублировать ключевые моменты текстом в чате. В длинной переписке важные моменты легко затеряются.
Разработка лендинга — это быстрее, дешевле и проще, чем создание многостраничного сайта. Посадочная страница подойдет, если у вас один продукт и нет необходимости делать сайт с двумя и более разделами. Также это хороший вариант, когда нужно протестировать рынок и оценить, будет ли предложение востребовано.
➡️Мобильное приложение на 200 000 пользователей, редизайн или лендинг для нового продукта — к каждому проекту мы подходим с вниманием к деталям. Уже 10+ лет разрабатываем сайты и веб-приложения, которые понравятся вашей аудитории.
<a class="blog-modal_opener">Свяжитесь с нами</a>, если вам нужен дизайн. Обсудим задачу, подберем лучшее решение, сразу прикинем сроки и бюджет.
.svg)
.png)
.png)